<template>
  <div>
    
    <!-- 分割线 -->
    <el-divider></el-divider>
    <!-- 电影添加表单 -->
    <el-form
      ref="form"
      :rules="rules"
      :model="form"
      label-width="100px"
      style="width: 500px"
    >
      <el-form-item label="封面" prop="cover">
        <el-upload
          class="avatar-uploader"
          :show-file-list="false"
          :action="`${$UPLOADURL}/upload`"
          :on-success="uploadSuccess"
        >
          <img v-if="form.cover" :src="form.cover" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="电影类别" prop="categoryId">
        <el-radio v-model="form.categoryId" label="1">热映</el-radio>
        <el-radio v-model="form.categoryId" label="2">待映</el-radio>
        <el-radio v-model="form.categoryId" label="3">经典</el-radio>
      </el-form-item>
      <el-form-item label="电影名称" prop="title">
        <el-input v-model="form.title" placeholder="请输入电影名称"></el-input>
      </el-form-item>
      <el-form-item label="电影类型" prop="type">
        <el-select v-model="form.type" multiple   placeholder="请选择">
          <el-option v-for="item in movieTypes" :key="item.id" :label="item.typename" :value="item.typename"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="电影主演" prop="starActor">
        <el-select
          v-model="form.starActor"
          
          multiple
          remote
          filterable
          reserve-keyword
          :remote-method="queryActors"
          placeholder="请输入主演姓名"
        >
          <el-option v-for="item in actors" :key="item.id" :label="item.actor_name" :value="item.actor_name"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="上映日期" prop="showingon">
        <el-date-picker value-format="yyyy-MM-dd" v-model="form.showingon" type="date" placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="电影评分" prop="score">
        <el-input v-model="form.score" placeholder="请输入电影评分"></el-input>
      </el-form-item>
      <el-form-item label="电影时长" prop="duration">
        <el-input v-model="form.duration" placeholder="请输入电影时长"></el-input>
      </el-form-item>
      <el-form-item label="电影简介" prop="description">
        <el-input v-model="form.description" placeholder="请输入电影简介"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">新增电影</el-button>
        <el-button>返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      movieTypes:[], // 绑定所有电影类型[{id:1,typename:''}]
      actors:[], // 绑定选择主演的数据[{id,actor_name,actor_avatar}]
      form: {
        // 封装表单数据
        categoryId: "1",
        cover:'',
        title:'',
        type:'',
        starActor:'',
        showingon:'', 
        score:'',
        description:'',
        duration:'',
      },
      rules: {
        // 整理表单验证规则
        categoryId: [{required: true, message:'必填', trigger: 'blur'}],
        cover:[{required: true, message:'必填', trigger: 'blur'}],
        title:[{required: true, message:'必填', trigger: 'blur'}],
        type:[{required: true, message:'必填', trigger: 'blur'}],
        starActor:[{required: true, message:'必填', trigger: 'blur'}],
        showingon:[{required: true, message:'必填', trigger: 'blur'}], 
        score:[{required: true, message:'必填', trigger: 'blur'}],
        description:[{required: true, message:'必填', trigger: 'blur'}],
        duration:[{required: true, message:'必填', trigger: 'blur'}],
      },
    };
  },
  mounted () {
    // 加载所有电影类型
    this.$httpApi.movieApi.queryMovieTypes().then(res=>{
      console.log('电影类型',res)
      // 将res.data.data存入data中中，在页面中使用v-for进行遍历
      
      this.movieTypes=res.data.data
    })
  },
  methods: {
  /**
   * 提交新增电影表单
   */
   onSubmit(){
    this.$refs['form'].validate(valid=>{
      if(valid){
        
        // 整理每个表单字段使之正确：starActor type
        this.form.type=this.form.type.join('/')
        this.form.starActor=this.form.starActor.join('/')
        console.log('验证通过：',this.form)
        this.$httpApi.movieApi.add(this.form).then(res=>{
          console.log('新增电影',res)
          if(res.data.code==200){
            this.$message({
              type:'success',
              message:'新增电影成功'
            })
             // 回到上一页
            //  this.$router.go(-1)
            this.$router.push('/home/movie-list')
          }
        })
      }
    })
  },
  /**
   * 接收输入框中的关键字
   * @param {*} word 
   */
    queryActors(word){
      // 发送http请求，模糊查询演员类别，将查询结果存入data
      this.$httpApi.actorsApi.queryByNameLike({name:word}).then(res=>{
        this.actors=res.data.data
      })
    },
    // 上头像成功后自动调用，将会自动传入响应结果res与文件对象file
    uploadSuccess(res, file) {
            console.log(res)
            this.form.cover = res.data
        },
  },
};
</script>

<style lang="scss" >
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 158px;
  height: 158px;
  line-height: 158px;
  text-align: center;
}

.avatar {
  width: 158px;
  height: 158px;
  display: block;
}
</style>